<template>
    <div class="all">
    <div class="top">
    <div class="top-pic"><img src="../assets/Vector (7).png" alt=""></div>
    <div class="colle">我的订单</div>
    <div class="heng"></div>
    </div>
    <div class="botten">
    <div class="ner">
    <div class="sw">收货地址</div>
    <div class="kuang">
    <template>
    <el-button type="text" @click="dialogFormVisible = true"> 
    <div class="dk"><img src="../assets/Vector (8).png" alt=""></div>
    </el-button>
   </template>
    </div>
    <div class="you">商品及优惠券</div>
    <div class="he1"></div>
    <div class="tu"><img src="../assets/Rectangle 171.png" alt=""></div>
    <div class="wenz">Redmi K30 5G</div>
    <div class="jiag">1599</div>
    <div class="he2"></div>
    <div class="song">配送方式</div>
    <div class="by">包邮</div>
    <div class="he3"></div>
    <div class="he4"></div>
    <div class="fp">发票</div>
    <div class="df">电子发票</div>
    <div class="gr">个人</div>
    <div class="sm">商品明细</div>
    <div class="jians">商品件数:</div>
    <div class="sz">商品总价:</div>
    <div class="hd">活动优惠:</div>
    <div class="yh">优惠券抵扣:</div>
    <div class="yf">运费:</div>
    <div class="yfz">应付总额:</div>
    <div class="jian">1件</div>
    <div class="jia">2500</div>
    <div class="hui">-0元</div>
    <div class="kou">-0元</div>
    <div class="fei">-0元</div>
    <div class="er"><p>2500</p>元</div>
    <div class="fanhui">
    <router-link to="/shop">返回购物车</router-link>
    </div>
    <div class="jiesu"><router-link to="">结算</router-link></div>
    </div>
    </div>
    <div class="dilog">
    <el-dialog title="添加收货地址" :visible.sync="dialogFormVisible" width="700px">
        <el-input v-model="digfome.name" placeholder="姓名"></el-input>
       <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
  </div>
</el-dialog>
    </div>
    </div>
    
</template>

<script>
export default {
    name:'address',
    data() {
        return {
         dialogFormVisible: false,
        form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
        digfome:{
            name:''
        },
        formLabelWidth: '120px'
        }
    },

     methods: {
      open() {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '添加成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消添加'
          });          
        });
      }
    }
}
</script>

<style scoped>
.all{
    width: 100%;
    height: 1147px;
    position: relative;
     min-height: calc(100vh - -200px - 336px);
}
.top{
    position: absolute;
    width: 1920px;
    height: 80px;
    left: 0px;
    top: 0px;
    background: #FFFFFF;
}
.top-pic{
    position: absolute;
    width: 20px;
    height: 26px;
    top: 27px;
    left: 350px;

}
.colle{
    position: absolute;
    width: 140px;
    height: 28px;
    left: 380px;
    top: 26px;
    font-family: 'PingFang SC';
    font-style: normal;
    font-weight: 400;
    font-size: 28px;
    line-height: 100%;
    color: #333333;
}
.heng{
    position: absolute;
    width: 2400px;
    height: 1px;
    left: 0px;
    top: 78px;
    background: #FF6700;
}
.botten{
    position: absolute;
    width: 1920px;
    height: 1042px;
    left: 0px;
    top: 80px;
    background: #F5F5F5;
}
.ner{
    position: absolute;
    width: 1200px;
    height: 998px;
    left: 350px;
    top: 20px;
    background: #FFFFFF;
    position: relative;
}
.sw{
    position: absolute;
    width: 72px;
    height: 18px;
    left: 80px;
    top: 56px;
    font-family: 'PingFang SC';
    font-style: normal;
    font-weight: 400;
    font-size: 18px;    
    line-height: 100%;
    color: #333333;
}
.dk{
    box-sizing: border-box;
    position: absolute;
    width: 270px;
    height: 194px;
    left:80px;
    top: 95px;
    border: 1px solid #B0B0B0;
}
.dk img{
    position: absolute;
    height: 34px;
    width: 34px;
    left: 120px;
    top: 77px;
}
.you{
    position: absolute;
    width: 108px;
    height: 18px;
    left: 80px;
    top: 325px;
    font-family: 'PingFang SC';
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 100%;
    color: #333333;
}
.he1{
    position: absolute;
    width: 1040px;
    height: 1px;
    left: 80px;
    top: 354px;
    background: #DCDFE6;
}
.tu{
    position: absolute;
    width: 36px;
    height: 36px;
    left: 82px;
    top: 367px;

}
.wenz{
    position: absolute;
    height: 16px;
    left: 124px;
    top: 377px;
    font-family: 'PingFang SC';
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 100%;
    color: #333333;
}
.jiag{
    position: absolute;
    width: 56px;
    height: 16px;
    left: 1058px;
    top: 377px;
    font-family: 'PingFang SC';
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 100%;
    color: #FF6700;

}
.he2{
    position: absolute;
    width: 1040px;
    height: 1px;
    left: 80px;
    top: 415px;
    background: #DCDFE6;
}
.he3{
    position: absolute;
    width: 1040px;
    height: 1px;
    left: 80px;
    top: 506px;
    background: #DCDFE6;
}
.he4{
    position: absolute;
    width: 1040px;
    height: 1px;
    left: 80px;
    top: 593px;
    background: #DCDFE6;
}
.song{
    position: absolute;
    width: 72px;
    height: 18px;
    left: 80px;
    top: 452px;
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 100%;
    color: #333333;
}
.by{
   position: absolute;
   width: 28px;
   height: 14px;
   left: 230px;
   top: 454px;
   font-family: 'PingFang SC';
   font-style: normal;
   font-weight: 400;
   font-size: 14px;
   line-height: 100%;
   color: #FF6700;

}
.fp{
   position: absolute;
   height: 18px;
   left: 80px;
   top: 541px;
   font-family: 'PingFang SC';
   font-style: normal;
   font-weight: 400;
   font-size: 18px;
   line-height: 100%;
   color: #333333;
}
.df{
    position: absolute;
    height: 14px;
    left: 230px;
    top: 543px;
    font-family: 'PingFang SC';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 100%;
    color: #FF6700;

}
.gr{
    position: absolute;
    height: 14px;
    left: 306px;
    top: 543px;
    font-family: 'PingFang SC';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 100%;
    color: #FF6700;
}
.sm{
    position: absolute;
    height: 14px;
    left: 354px;
    top: 543px;
    font-family: 'PingFang SC';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 100%;
    color: #FF6700;
}
.jians{
    position: absolute;
    height: 16px;
    right: 202px;
    top: 648px;
    font-family: 'PingFang SC';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 100%;
    color: #606266;
}
.sz{
    position: absolute;
    height: 16px;
    right: 202px;
    top: 678px;
    font-family: 'PingFang SC';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 100%;
    color: #606266;
}
.hd{
    position: absolute;
    height: 16px;
    right: 202px;
    top: 708px;
    font-family: 'PingFang SC';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 100%;
    color: #606266;
}
.yh{
    position: absolute;
    height: 16px;
    right: 202px;
    top: 738px;
    font-family: 'PingFang SC';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 100%;
    color: #606266;
}
.yf{
    position: absolute;
    height: 16px;
    right: 202px;
    top: 768px;
    font-family: 'PingFang SC';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 100%;
    color: #606266;
}
.yfz{
    position: absolute;
    height: 16px;
    right: 202px;
    top: 814px;
    font-family: 'PingFang SC';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 100%;
    color: #606266;
}
.jian{
    position: absolute;
    height: 20px;
    right: 82px;
    top: 648px;
    font-family: 'PingFang SC';
    font-style: normal;
    font-weight: 500;
    font-size: 20px;
    line-height: 100%;
    color: #FF6700;

}
.jia{
    position: absolute;
    height: 16px;
    right: 82px;
    top: 678px;
    font-family: 'PingFang SC';
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 100%;
    color: #FF6700;
}
.hui{
    position: absolute;
    height: 16px;
    right: 82px;
    top: 708px;
    font-family: 'PingFang SC';
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 100%;
    color: #FF6700;
}
.kou{
    position: absolute;
    height: 16px;
    right: 82px;
    top: 738px;
    font-family: 'PingFang SC';
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 100%;
    color: #FF6700;
}
.fei{
    position: absolute;
    height: 16px;
    right: 82px;
    top: 768px;
    font-family: 'PingFang SC';
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 100%;
    color: #FF6700;
}
.er{
    position: absolute;
    height: 16px;
    right: 82px;
    top: 812px;
    font-family: 'PingFang SC';
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 100%;
    color: #FF6700;  
}
.er p{
    position: absolute;
    height: 30px;
    right: 22px;
    top: -41px;
    font-style: normal;
    font-weight: 500;
    font-size: 30px;
    line-height: 100%;
    color: #FF6700;
}
.fanhui{
    box-sizing: border-box;
    position: absolute;
    width: 160px;
    height: 38px;
    left: 774px;
    top: 878px;
    border: 1px solid #B0B0B0;
}
.fanhui a{
    position: absolute;
    width: 70px;
    height: 14px;
    left: 45px;
    top: 11px;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 100%;
    color: #B0B0B0;
    text-decoration: none;
}
.jiesu{
    position: absolute;
    width: 160px;
    height: 38px;
    left: 958px;
    top: 878px;
    background: #FF6700;
}
.jiesu a{
    position: absolute;
    width: 28px;
    height: 14px;
    left: 65px;
    top: 11px;
    font-family: 'PingFang SC';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 100%;
    color: #FFFFFF;
    text-decoration: none;
}
::v-deep .el-dialog__title{
    margin-left: -525px;
}
::v-deep .el-dialog__header{
   width: 660px;
   height: 38px;
   background: #F5F7FA;
}
</style>